import { useCallback, useEffect, useState } from "react"
import useGetMap, { type CallBackPramse } from "../hooks/useGetMap"
import useInitWorld from "../hooks/useInitWorld"
import MapLoad from "../Map_load"
import type { AnyObject } from "antd/es/_util/type"

const MapA = () => {

  const mapClick = (v: CallBackPramse) => {
    console.log(v, 'map', 111);
  }


  const { map, loading, locaLib, AMap } = useGetMap({
    id: 'map_A_id',
    mapOption: {
      // zooms: [3, 5],
      center: [110, 30],
      showIndoorMap: false,
      zoom: 5,
      isHotspot: false,
      defaultCursor: 'pointer',
      touchZoomCenter: 1,
      viewMode: '3D',
      pitch: 30,
      mapStyle: 'amap://styles/2c3fbcbc45b2492dfde2badb77e31cde',
    },
    mapEvents: [
      {
        type: 'click',
        callBack: mapClick
      }
    ]
  })

  const { countryCode } = useInitWorld({ AMap, map })

  // 国家编码
  useEffect(() => {
    if (!countryCode) return
    console.log(countryCode);

  }, [countryCode])

  // 创建loca图层
  const [loca, setLoca] = useState<Loca.Container | null>(null)
  // 呼吸点
  const [scatter, setScatter] = useState<Loca.ScatterLayer | null>(null)
  // 弧线
  const [pulseLink, setPulseLink] = useState<Loca.PulseLinkLayer | null>(null)



  // 初始化Loca
  const init_loca = useCallback(() => {
    if (!locaLib || !map) return

    const loca_init = new locaLib.Container({
      map
    });

    setLoca(loca_init)



  }, [locaLib, map])

  // 初始化 ScatterLayer
  const init_scatter = useCallback(() => {
    if (!loca || !locaLib) return

    const scatter_init = new locaLib.ScatterLayer({
      zIndex: 10,
      opacity: 0.6,
      visible: true,
      zooms: [2, 22],
    });

    setScatter(scatter_init)
  }, [loca, locaLib])

  // 初始化 PulseLineLayer
  const init_pulseLink = useCallback(() => {
    if (!locaLib || !loca) return

    const pulseLink_init = new locaLib.PulseLinkLayer({
      zIndex: 11,
      opacity: 0.8,
      visible: true,
      zooms: [2, 22],
    })

    setPulseLink(pulseLink_init)
  }, [locaLib, loca])




  // 呼吸点数据渲染
  const load_scatter_data = useCallback(() => {
    if (!scatter || !locaLib || !loca) return

    // 呼吸点数据
    const pointGeo = new locaLib.GeoJSONSource({
      url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json',
    });

    scatter.setSource(pointGeo);
    // 呼吸点样式
    scatter.setStyle({
      unit: 'meter',
      size: [100000, 100000],
      borderWidth: 0,
      texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
      duration: 2000,
      animate: true,
    });

    loca.add(scatter);
  }, [scatter, locaLib, loca])




  // 弧线数据渲染
  const load_pulseLink_data = useCallback(() => {
    if (!pulseLink || !locaLib || !loca) return;

    const lineGeo = new locaLib.GeoJSONSource({
      url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
    });

    pulseLink.setSource(lineGeo);
    pulseLink.setStyle({
      unit: 'meter',
      dash: [40000, 0, 40000, 0],
      lineWidth: function () {
        return [20000, 1000];
      },
      height: function (_: number, feat: { distance: number }) {
        return feat.distance / 3 + 10;
      },
      // altitude: 1000,
      smoothSteps: 30,
      speed: function () {
        return 1000 + Math.random() * 200000;
      },
      flowLength: 100000,
      lineColors: function () {
        return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)'];
      },
      maxHeightScale: 0.3, // 弧顶位置比例
      headColor: 'rgba(255, 255, 0, 1)',
      trailColor: 'rgba(255, 255,0,0)',
    } as AnyObject);

    loca.add(pulseLink);
  }, [pulseLink, locaLib, loca])



  // 启动动画
  const start_animation = useCallback(() => {
    if (!loca) return;
    loca.animate.start();
  }, [loca]);


  useEffect(() => {
    init_loca()
  }, [init_loca])

  useEffect(() => {
    init_scatter()
  }, [init_scatter])

  useEffect(() => {
    init_pulseLink()
  }, [init_pulseLink])

  useEffect(() => {
    load_scatter_data()
  }, [load_scatter_data])


  useEffect(() => {
    load_pulseLink_data()
  }, [load_pulseLink_data])



  useEffect(() => {
    start_animation()
  }, [start_animation])



  return <div className="w-full h-full relative">
    <div id="map_A_id" className="w-full h-full"></div>
    {
      loading ? <div className="absolute z-1000 w-full h-full top-0"><MapLoad /></div> : null
    }
  </div>
}

export default MapA